<template>
  <PageWrapper fixedHeight contentFullHeight>
    <a-row type="flex" align="middle" :gutter="10">
      <a-col align="right">单位类型</a-col>
      <a-col :span="4">
        <a-select
          :fieldNames="{ label: 'typeName', value: 'id' }"
          :options="typeOptions"
          mode="multiple"
          v-model:value="unitTypeIds"
          placeholder="请选择"
          style="width: 100%"
        />
      </a-col>
      <a-col align="right">保留小数</a-col>
      <a-col :span="4">
        <a-select
          :options="numberOptions"
          v-model:value="saveNumber"
          placeholder="请选择"
          style="width: 100%"
          allowClear
        />
      </a-col>
      <a-col :span="2">
        <a-button type="primary" @click="handleSubmit">确认</a-button>
      </a-col>
    </a-row>
    <a-card v-for="(item, index) in submitOptions" :key="index">
      <div class="card-title"> {{ item.typeName }}换算 </div>
      <div class="card-ipt">
        <a-input-number
          placeholder="请输入"
          v-model:value="item.calc.number1"
          @change="handleChange(item)"
        />
        <a-select
          placeholder="请选择"
          :fieldNames="{ label: 'unitName', value: 'symbol' }"
          :options="item.unitVo"
          v-model:value="item.calc.unit1"
          @change="handleChange(item)"
        />
      </div>
      <Icon icon="ant-design:arrow-down-outlined" color="#5e95ff" size="30" />
      <div class="card-ipt">
        <a-input-number v-model:value="item.calc.number2" readonly :precision="precision" />
        <a-select
          placeholder="请选择"
          :fieldNames="{ label: 'unitName', value: 'symbol' }"
          :options="item.unitVo"
          v-model:value="item.calc.unit2"
          @change="handleChange(item)"
        />
      </div>
    </a-card>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import type { SelectProps } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { getConversionAll } from '/@/api/erp/unit/conversion';
  import { ConversionListAllModel } from '/@/api/erp/unit/conversion/model/index';
  import { Icon } from '/@/components/Icon';
  import { isNumber } from 'lodash-es';

  const typeOptions = ref<ConversionListAllModel[]>([]);
  const unitTypeIds = ref<string>();
  const saveNumber = ref<string>();
  const precision = ref();

  const submitOptions = ref<any[]>([]);
  const numberOptions = ref<SelectProps['options']>([
    {
      value: 'all',
      label: '整数位',
    },
    {
      value: 2,
      label: '2位',
    },
    {
      value: 4,
      label: '4位',
    },
    {
      value: 6,
      label: '6位',
    },
  ]);

  onMounted(() => {
    getOptions();
  });

  const getOptions = async () => {
    typeOptions.value = await getConversionAll();
  };

  const handleSubmit = () => {
    submitOptions.value = typeOptions.value.filter((x) => unitTypeIds.value?.includes(x.id));
    submitOptions.value.forEach(
      (x) => (x.calc = { number1: null, unit1: '', number2: null, unit2: '' }),
    );
    precision.value = !saveNumber.value
      ? undefined
      : saveNumber.value === 'all'
      ? 0
      : saveNumber.value;
  };

  const handleChange = (info) => {
    if (isNumber(info.calc.number1) && info.calc.unit1 && info.calc.unit2) {
      const unitObj = { unitNumber1: null, unitNumber2: null };
      info.unitVo.forEach((x) => {
        if (x.symbol === info.calc.unit1) unitObj.unitNumber1 = x.number;
        if (x.symbol === info.calc.unit2) unitObj.unitNumber2 = x.number;
      });
      if (isNumber(unitObj.unitNumber1) && isNumber(unitObj.unitNumber2)) {
        info.calc.number2 = (unitObj.unitNumber2 / unitObj.unitNumber1) * info.calc.number1;
      }
    }
  };
  defineExpose({ getOptions });
</script>
<style lang="less" scoped>
  :deep(.vben-page-wrapper-content) {
    margin: 0;
    padding: 10px;
    background: #fff;
  }

  :deep(.ant-card) {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 20px;
    width: 48%;
    margin-right: 2%;
    float: left;
  }

  :deep(.ant-card-body) {
    text-align: center;
    padding: 15px;

    .card-title {
      font-size: 18px;
      color: #5e95ff;
      padding-bottom: 10px;
    }
  }

  .card-ipt {
    display: flex;
    justify-content: center;
    margin: 10px 0;

    :deep(.ant-input-number) {
      width: 30%;
      margin-right: 40px;
    }

    :deep(.ant-select) {
      width: 30%;
    }
  }
</style>
